<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        .active{
            color:red
        }
    </style>
</head>
<body>
    <div class="active box">我是div</div>
    <input type="text" class="myInput" />
    <script>
        // 一、类名操作 
        // className  classList
        // 1.添加类名  addClass("类名");
        // $(document).click(function(){
        //     $("div").addClass("active");
        // })
        // 2.移除类名  removeClass("类名");
        // $(document).click(function(){
        //     $("div").removeClass("active");
        // })

        // 3.判断元素是否拥有某个类名 hasClass("类名");
        // $(document).click(function(){
        //    let res =   $("div").hasClass("active1");
        //    console.log(res);
        // })

        // 4.可以切换类名 ：toggleClass();如果有类名就删除这个类名 如果没有类名就添加这个类名；
        // $(document).click(function(){
        //     $(".box").toggleClass("active");
        // })



        // 二、文本操作；
        // 原生都是 赋值操作 和属性操作 jq都是方法；
        // document.querySelector(".box").innerHTML
        // document.querySelector(".box") = function(){}
        // 1.可以获取或者设置 超文本；
        // 获取超文本html
        // $(document).click(function(){
        //   let res =   $(".box").html();
        //   console.log(res);
        // })
        // 设置超文本
        // $(document).click(function(){
        // //   let res =   $(".box").html();
        // //   console.log(res);
        // $(".box").html("<h1>我是标题</h1>");
        // })

        // 2.操作文本 ： 1.获取文本  2.设置文本
        // 1.获取文本
        // $(document).click(function(){
        //     let res =  $(".box").text();
        //     console.log(res);
        // })

        // $(document).click(function(){
        //       $(".box").text("<h1>123</h1>");
        // })

        // 三、获取或者设置 标签的值 ；
        // 获取
            // $(document).click(function(){
            //    let res =  $(".myInput").val();
            //    console.log(res);
            // })

        // 设置
            // $(document).click(function(){
            //  $(".myInput").val("yyds");
            // })
    </script>
</body>
</html>